<template>
  <div class="app-container" v-loading="loading">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="商品">
        <el-input v-model="queryParams.skuName" placeholder="商品名称" clearable />
      </el-form-item>
      <el-form-item label="项目ID" prop="id">
        <el-select clearable="" v-model="queryParams.id" filterable placeholder="请选择项目">
          <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">检索</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd"
        style="margin-right: 20px">新增项目商品</el-button>
      <ExportExcel :list="exportList" :tHeader="tHeader" :tValue="tValue" filename="导出的项目商品列表">excel导出</ExportExcel>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table ref="skuTable" :data="list" style="width: 100%" empty-text="--" @selection-change="handleSelectionChange"
      row-key="id">
      <el-table-column type="selection" width="55" :reserve-selection="true">
      </el-table-column>
      <el-table-column label="序号" type="index" align="center" prop="index">
        <template slot-scope="scope">
          <span>{{ (pageNum) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目" align="center" prop="projectName" :show-overflow-tooltip="true" />
      <el-table-column label="SKU编号" align="center" prop="skuId" :show-overflow-tooltip="true" />
      <el-table-column label="SKU名称" align="center" prop="skuName" :show-overflow-tooltip="true" />
      <el-table-column label="SKU图片" align="center" prop="imageUrl">
        <template slot-scope="scope">

          <el-popover trigger="hover" placement="bottom" width="400">
            <img slot="reference" :src="scope.row.imageUrl" height="50" v-if="scope.row.imageUrl" />
            <img :src="scope.row.imageUrl" style="width: 300px" v-if="scope.row.imageUrl" />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="SKU品类" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope" v-if="scope.row.classify != null">
          {{ scope.row.classify === 0 ? '本品' : (scope.row.classify === 1 ? '竞品' : '他品') }}
        </template>
      </el-table-column>
      <el-table-column label="是否为必铺品" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ scope.row.bipupin === true ? '是' : '否' }}
        </template>
      </el-table-column>

      <!-- <el-table-column label="创建时间" align="center" prop="imageUrl" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ formateTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="mini" type="text" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="pagination" />



    <!-- 以下为弹框相关 修改-->
    <el-dialog :title="editTitle" :visible.sync="editOpen" @close="cancel" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="SKU编号" prop="skuId">
              <el-input v-model="form.skuId" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SKU名称" prop="skuName">
              <el-input v-model="form.skuName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目ID" prop="projectId">
              <el-select v-model="form.projectId" filterable placeholder="请选择">
                <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SKU品类" prop="classify">
              <el-radio-group v-model="form.classify">
                <el-radio :label="0">本品</el-radio>
                <el-radio :label="1">竞品</el-radio>
                <el-radio :label="2">他品</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.classify === 0">
            <el-form-item label="是否为必铺品" prop="bipupin">
              <el-radio-group v-model="form.bipupin">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="SKU图片" prop="skuImgUrl">
              <el-upload multiple class="avatar-uploader" :action="uploadFileUrl + '?fileTypeCode=' + this.fileTypeCode"
                :show-file-list="false" :data="uploadData" :headers="headers" :on-success="handleUploadSuccess">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="modifyPeojctSku">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增项目商品 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogOpen" @close="cancel" width="1500px" append-to-body>
      <el-form :model="form" label-width="120px">
        <el-form-item label="项目ID" prop="projectId">
          <el-select v-model="form.projectId" filterable placeholder="请选择">
            <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-row>
            <el-form :model="addSearchForm"  label-width="120px">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="商品名称" prop="skuName">
                    <el-input v-model="addSearchForm.skuName" placeholder="请输入" @input="whileInput" clearable/>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="V4算法名称" prop="v4SkuName">
                    <el-input v-model="addSearchForm.v4SkuName" placeholder="请输入" @input="whileInput" clearable/>
                  </el-form-item>
                </el-col>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getSkuList" style="margin-left: 20px;">检索</el-button>
              </el-row>
            </el-form>

        </el-row>
      </el-form>
      <el-table v-loading="addSkuListLoading" :data="addSkuList" @selection-change="handleSelectionChange" row-key="skuId"
        ref="skuTable">
        <el-table-column type="selection" width="55" :reserve-selection="true"  :selectable="selectable"/>
        <el-table-column label="SKU编号" align="center" prop="skuId" :show-overflow-tooltip="true" />
        <el-table-column label="SKU名称" align="center" prop="skuName" :show-overflow-tooltip="true" />
        <el-table-column label="SKU图片" align="center" prop="imageUrl" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom">
              <img slot="reference" :src="scope.row.imageUrl" height="50" v-if="scope.row.imageUrl" />
              <img :src="scope.row.imageUrl" style="height: 200px" v-if="scope.row.imageUrl" />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="绑定V4算法名称" align="center" prop="v4SkuName" :show-overflow-tooltip="true" />
        <el-table-column label="V4顶层算法Id" align="center" prop="v4TopSkuId" :show-overflow-tooltip="true" />
        <el-table-column label="V4顶层主图" align="center" prop="v4TopSkuPackageUrl">
          <template slot-scope="scope">
            <div>
              <el-popover trigger="hover" placement="bottom" width="400" v-if="scope.row.v4TopSkuPackageUrl">
                <img slot="reference" :src="scope.row.v4TopSkuPackageUrl" height="50"
                  v-if="scope.row.v4TopSkuPackageUrl" />
                <img :src="scope.row.v4TopSkuPackageUrl" style="height: 200px" v-if="scope.row.v4TopSkuPackageUrl" />
              </el-popover>
              <span v-if="!scope.row.v4TopSkuPackageUrl">-</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="V4中间层算法Id" align="center" prop="v4MidSkuId" :show-overflow-tooltip="true" />
        <el-table-column label="V4中间层主图" align="center" prop="v4MidSkuPackageUrl">
          <template slot-scope="scope">
            <div>
              <el-popover trigger="hover" placement="bottom" width="400" v-if="scope.row.v4MidSkuPackageUrl">
                <img slot="reference" :src="scope.row.v4MidSkuPackageUrl" height="50"
                  v-if="scope.row.v4MidSkuPackageUrl" />
                <img :src="scope.row.v4MidSkuPackageUrl" style="height: 200px" v-if="scope.row.v4MidSkuPackageUrl" />
              </el-popover>
              <span v-if="!scope.row.v4MidSkuPackageUrl">-</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="V4底层算法Id" align="center" prop="v4BottomSkuId" :show-overflow-tooltip="true" />
        <el-table-column label="V4底层主图" align="center" prop="v4BottomSkuPackageUrl">
          <template slot-scope="scope">
            <div>
              <el-popover trigger="hover" placement="bottom" width="400" v-if="scope.row.v4BottomSkuPackageUrl">
                <img slot="reference" :src="scope.row.v4BottomSkuPackageUrl" height="50"
                  v-if="scope.row.v4BottomSkuPackageUrl" />
                <img :src="scope.row.v4BottomSkuPackageUrl" style="height: 200px"
                  v-if="scope.row.v4BottomSkuPackageUrl" />
              </el-popover>
              <span v-if="!scope.row.v4BottomSkuPackageUrl">-</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="SKU品类" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope" v-if="scope.row.classify != null">
            <el-select v-model="scope.row.classify" filterable @change="ClassifyAndBipupinChange(scope.row)">
              <el-option v-for="(item, index) in classify" :key="index" :label="item.label" :value="item.value" />
            </el-select>
            <!-- <span v-else>{{ scope.row.classify === 0 ? '本品' : (scope.row.classify === 1 ? '竞品' : '他品') }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="是否为必铺品" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-select v-model="scope.row.bipupin" filterable @change="ClassifyAndBipupinChange(scope.row)" :disabled="scope.row.classify !== 0">
              <el-option v-for="item in bipupin" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <!-- <span v-else>{{ scope.row.bipupin === "1" ? '是' : '否' }} </span> -->
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
      
      </el-table>
      <pagination v-show="publicGoodsTotal > 0" :total="publicGoodsTotal" :page.sync="publicGoodsPageNum" :limit.sync="publicGoodsPageSize" @pagination="publicGoodsPagination" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除前提示 -->
    <el-dialog title="提示" :visible.sync="deleteVisible" width="30%">
      <span>是否删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteSKU">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
    
<script>
import {
  getProjectGoodsList,  //获取列表
  addProjectSKU,  //新增项目sku
  getProjectList,  //获取项目列表
  modifyProjectSKU,  //修改项目商品
  delProjectSKU,  //删除项目商品
  batchInsert,   //批量新增项目商品
  getProjectGoodsInfo  //获取项目商品详情
} from '@/api/projectSku/projectSku'
import { getToken } from '@/utils/auth'
import ExportExcel from '../../../components/ExcelUtils/Export2Excel.vue'
import { getGoodsList } from '@/api/arithmetic/arithmetic'  //新增时获取商品池
import moment from 'moment'
export default {
  name: 'Online',
  components: {
    ExportExcel
  },
  data() {
    return {
      // 总条数
      publicGoodsTotal: 0,
      publicGoodsPageNum: 1,
      publicGoodsPageSize: 10,
      // 项目列表
      projectList: [],
      // 项目id
      projectId: '',
      // 项目名称
      projectName: '',
      // 项目id
      projectIds: [],
      // 项目名称
      projectNames: [],
      // 项目名称
      projectNamesStr: '',
      // 项目名称
      projectNamesArr: [],
      // 项目名称
      //code:1 文本  2-软件包 3-图片 4-视频 9999-其他
      fileTypeCode: 3,
      // 图片上传信息
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadData: {
        userId: this.$store.state.user.id,
      },
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/oss-controller/upload-file", // 上传文件服务器地址
      //uploadFileUrl: process.env.VUE_APP_BASE_API + '/sku/upload/', // 上传文件服务器地址
      imageUrl: '',  //修改时的图片
      chooseSkuList: [], //新增时的选中列表
      exportList: [],
      tHeader: ['项目', 'SKU编号', 'SKU名称', 'SKU品类', '必铺品', 'SKU图片'],
      tValue: ['projectName', 'skuId', 'skuName', 'classify', 'bipupin', 'imageUrl'],
      classify: [{
        value: 0,
        label: '本品'
      }, {
        value: 1,
        label: '竞品'
      }, {
        value: 2,
        label: '他品'
      }],
      bipupin: [{
        value: false,
        label: '否'
      }, {
        value: true,
        label: '是'
      }],
      skuList: [],
      projectList: {}, //获取到的项目列表
      projectName: [],//项目名称
      skuImgUrl: '',//图片url
      chooseValue: '', // 绑定单选框
      deleteVisible: false, // 删除提示
      addSkuListLoading: false,
      addSkuList: [],  //新增项目商品
      editOpen: false,
      showSearch: true,
      editTitle: '',
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      pageNum: 1,
      pageSize: 10,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        skuName: '',
        projectId: '',
        orderByColumn:'id',
        isAsc:'desc'
      },
      dialogOpen: false,
      dialogTitle: '新增项目商品',
      rules: {
        skuId: [{ required: true, message: '不能为空', trigger: 'blur' }],
        skuName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        projectId: [{ required: true, message: '不能为空', trigger: 'blur' }],
      },
      addSearchForm:{
        v4SkuName:'',
        skuName:''
      },
      form: {
        skuId: '', //	string allowEmptyValue: false 商品唯一标识，不可修改
        skuName: '', //	string allowEmptyValue: false 商品名称
        projectId: '',
        file: '',
        classify: 0, //产品品类 0本品 1竞品 2他品
        bipupin: true,//默认不是必铺品 true是 false不是
        id: '',//选中行的id
      },
      editRow: null, //修改行
    }
  },
  created() {
    this.getProject()
  },
  mounted() {
  },
  watch: {
  },
  methods: {
    whileInput(){
      this.$forceUpdate()
    },
    selectable(row,index){
      if(row.v4SkuName){
        return true
      }
    },
    // //导出excel
    // ExportExcel() {
    //   const params = this.list
    //   exportSKUExcel(params).then((res) => {
    //     if (res.data == 200) {
    //       this.$message.success("导出成功！")
    //     }
    //   }).catch((err) => {
    //     this.$message.success("结果查询失败，原因：", err.message)
    //   })
    // },
    /**获取项目 */
    getProject() {
      let params = {
        orderByColumn:'id',
        isAsc:'desc'
      }
      getProjectList(params).then((res) => {
        if (res.code === 200) {
          this.projectList = res.rows
          for (var i = 0; i < res.rows.length; i++) {
            this.projectName.push(res.rows[i].projectName)
          }

        }
      }).finally(() => {
        const projectId = this.projectList[0].id
        this.getList(projectId)
      })
    },
    //图片上传成功
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.imageUrl = res.data.url
      } else {
        this.$message.error("图片上传失败")
      }
    },
    /** 勾选事件*/
    handleSelectionChange(selection) {
      //导出excel
      this.exportList = selection
      //选中的商品列表
      this.chooseSkuList = []
      for (let i = 0; i < selection.length; i++) {
        const list = {};
        list.skuId = selection[i].skuId;
        list.classify = selection[i].classify;
        list.bipupin = selection[i].bipupin;
        list.id = selection[i].id;
        list.imageUrl = selection[i].imageUrl;
        list.projectId = this.form.projectId;
        list.skuName = selection[i].skuName;
        list.algoSkuName = selection[i].v4SkuName;
        list.goodsPoolId = selection[i].id
        if (list.classify !== 0) {
          list.bipupin = false;
        }
        this.chooseSkuList.push(list)
      }
      console.log('选择的商品列表', this.chooseSkuList);

    },
    /**公共商品池-分页*/
    publicGoodsPagination() {
      this.getSkuList()
    },
    /**分页*/
    pagination() {
      this.loading = true
      this.getList().finally(() => (this.loading = false))
    },
    /** 点击新增sku */
    handleAdd() {
      this.dialogTitle = '新增项目商品'
      this.dialogOpen = true
      this.imageUrl = ''
      this.form.skuId = ''
      this.form.skuName = ''
      this.form.projectId = ''
      this.addSearchForm.v4SkuName = ''
      this.addSearchForm.skuName = ''
      this.getSkuList();
    },
    /**修改品类和必铺品时 */
    ClassifyAndBipupinChange(row) {
      if(row.classify !== 0){
        row.bipupin = false
      }
      if (this.chooseSkuList == []) {
        return
      }
      this.chooseSkuList.forEach(item => {
        if (item.skuId == row.skuId) {
          item.classify = row.classify
          item.bipupin = row.bipupin
          if (row.classify !== 0) {
            item.bipupin = false
          }
        }
      })
    },
    /** 创建时间 */
    formateTime(time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
    /**提交新增表单 */
    submitForm() {
      if (this.form.projectId == '') {
        this.$message.error('请选择项目')
        return
      }
      //新增
      this.chooseSkuList.map((item) => {
        item.projectId = this.form.projectId
      })
      const params = this.chooseSkuList
      batchInsert(params).then((res) => {
        if (res.code === 200) {
          this.$message.success("添加成功！")
        }
      }).finally(() => {
        this.cancel()
        this.getList()
      })
    },
    /**修改 */
    modifyPeojctSku() {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        if (this.form.classify !== 0) {
          this.form.bipupin = false
        }
        //const imageUrl = this.skuImgUrl.slice(5) + ".png"
        const form =
        {
          skuId: this.form.skuId, //	string allowEmptyValue: false 商品唯一标识，不可修改
          skuName: this.form.skuName, //	string allowEmptyValue: false 商品名称
          projectId: this.form.projectId,  //
          imageUrl: this.imageUrl,
          classify: this.form.classify, //产品品类 0本品 1竞品 2他品
          bipupin: this.form.bipupin,//默认不是必铺品 1是 0不是
          id: this.form.id,//选中行的id
          algoSkuName: this.form.v4SkuName
        }
        this.loading = true
        const params = form
        modifyProjectSKU(params)
          .then((res) => {
            this.getList()
            this.$message.success('修改SKU成功')
            this.cancel()
          })
          .catch((err) => {
            this.$message.error(err.message || '修改SKU失败')
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    /**关闭弹窗 新增或修改*/
    cancel() {
      this.$refs.skuTable.clearSelection();
      this.editRow = null
      this.dialogOpen = false
      this.editOpen = false
      // this.form={}
      this.form.skuId = ''
      this.form.skuName = ''
      this.form.imageUrl = ''
      this.form.userId = 0
      this.form.classify = 0
      this.form.bipupin = false
      this.form.file = ''
      this.form.id = ''
      this.skuImgUrl = ''
    },
    /** 查询 */
    getList(id) {
      // 传参  
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        projectId: this.queryParams.id,
        skuName: this.queryParams.skuName,
        orderByColumn:'id',
        isAsc:'desc'
      }
      if (typeof id == 'number') {
        params.projectId = id
      }
      if (this.$route.query.projectId) {
        params.projectId = this.$route.query.projectId
      }
      // 加载
      this.loading = true
      // 接口调用
      const req = getProjectGoodsList(params)
        .then((res) => {
          if (res) {
            this.list = res.rows
            this.total = res.total
          }
        })
        .finally(() => {
          this.loading = false
          this.$router.push({ query: {} })
        })
      return req
    },
    /** 新增时获取商品池列表 */
    getSkuList() {
      const params = {
        pageNum: this.publicGoodsPageNum,
        orderByColumn:'id',
        pageSize: this.publicGoodsPageSize,
        isAsc:'desc',
        ...this.addSearchForm
      }
      // 加载
      this.addSkuListLoading = true
      // 接口调用
      const req = getGoodsList(params)
        .then((res) => {
          if (res) {
            this.addSkuList = res.rows
            this.publicGoodsTotal = res.total
          }
        })
        .finally(() => {
          this.addSkuListLoading = false
        })
      return req
    },
    /**
     * 点击修改SKU时
     * @param {Object} row
     */
    handleEdit(row) {
      this.editRow = row
      // this.imageUrl = row.imageUrl
      // this.form.skuId = row.skuId
      // this.form.skuName = row.skuName
      // this.form.classify = row.classify
      // this.form.bipupin = Number(row.bipupin)
      // this.form.projectId = row.projectId
      //this.form.userId = row.user?.id
      // this.skuImgUrl = row.imageUrl
      // this.form.id = row.id
      this.editOpen = true
      this.editTitle = '修改SKU'

      getProjectGoodsInfo(row.id).then((res) => {
        if (res.code === 200) {

          this.form.skuId = res.data.skuId
          this.form.skuName = res.data.skuName
          this.form.classify = res.data.classify
          this.form.bipupin = res.data.bipupin
          //this.form.id = res.data.id
          this.form.projectId = parseInt(res.data.projectId)
          this.imageUrl = res.data.imageUrl
          this.form.id = res.data.id
          this.$forceUpdate()
        }
      })
    },

    /**删除按钮 */
    handleDel(row) {
      this.delRow = row
      this.deleteVisible = true
    },
    /** 确定删除 */
    deleteSKU() {
      let row = this.delRow
      this.loading = true
      delProjectSKU({ ids: String(row.id) })
        .then((res) => {
          this.getList()
          this.$message.success('SKU删除成功')
        })
        .catch((err) => {
          this.$message.error(err.message || 'SKU删除失败')
        })
        .finally(() => {
          this.loading = false
          this.deleteVisible = false
        })
    },
  },
}
</script>
<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.radio {
  .el-radio__label {
    display: none;
  }
}
</style>
    